<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.register{
				
			}
			span{
				color:red;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function() {
				$(".validate").blur(function() {
					console.log(this.pattern);
					let reg = new RegExp("^" + this.pattern + "$");
					console.log(reg, this.value);
					//console.log(reg.test(this.value));
					if (reg.test(this.value)) {
						$(this).next().html("");
					} else {
						//  $(this).next().html("error");
						$(this).next().html($(this).next().attr("err-msg"));
					}
			
				});
				$(":password[name=repass]").blur(function() {
					let pa = $("[name=pass]").val();
					if (pa != this.value) {
						$(this).next().html("两次密码输入不一致！");
					} else {
						$(this).next().empty();
					}
				});
				$(":submit").click(function(){
					$(".validate").trigger("blur");
				});
			});
		</script>
	</head>
	<body>
		<div>
			<div class="register">
				<form action="1.html">
					<p>
						<label>名字:</label><input type="text" class="validate" name="text1" placeholder="请输入账号" required
					pattern="[\u4e00-\u9fa5]+" />
					<span err-msg="请填写正确的名字"></span>
					</p>
					<p>
						<label>姓氏:</label><input type="text" class="validate" name="text1" placeholder="请输入账号" required
					pattern="[\u4e00-\u9fa5]+" />
					<span err-msg="请填写正确的姓氏"></span>
					</p>
					<p>
						<label>登录名:</label><input type="text" class="validate" name="text1" placeholder="请输入账号" required
					pattern="\w" />
					<span err-msg="请填写正确的登录号"></span>
					</p>
					<p>
						<label>密码:</label><input type="password" class="validate" name="pass" placeholder="密码等于或者大于6个字符" required
							pattern="\w{6}" />
						<span err-msg="密码必须等于或者大于6个字符"></span>
					</p>
					<p>
						<label>再次输入密码:</label><input class="validate" type="password" name="repass" placeholder="密码等于或者大于6个字符"
							required pattern="\w{6}" /><span err-msg="密码必须等于或者大于6个字符"></span>
					</p>
					<p>
						<label>邮箱:</label><input type="email" class="validate" name="Eamils" placeholder="请输入邮箱" required
					pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" />
					<span err-msg="请填写正确的邮箱"></span>
					</p>
					<p>
						<button type="submit">登录</button>
					</p>
				</form>
			</div>
			<div class="enter">
				<button>已有账号，马上登陆</button>
			</div>
		</div>
	</body>
</html>